<template>
<div>
  <el-button type="primary" size="small" @click="goodsRegis">
    商品录入
  </el-button>
  <el-table
    stripe
    border
    :data="this.goodsData"
    style="width: 100%;margin-top: 10px"
    @selection-change="handlerSelectionChange"
    ref ="goodsTable"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="序号">
      <template v-slot="scope">
        <span>{{(pageParams.pageNum - 1) * pageParams.pageSize + scope.$index + 1}}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="kind"
      label="商品种类">
    </el-table-column>
    <el-table-column
      prop="name"
      label="商品名称">
    </el-table-column>
    <el-table-column
      prop="storage"
      label="商品库存">
    </el-table-column>
    <el-table-column
      prop="info"
      label="商品信息">
    </el-table-column>
    <el-table-column
      prop="price"
      label="商品价格">
    </el-table-column>
    <el-table-column
      prop="status"
      label="商品状态"
      :filters="[{ text: '未入仓', value: '未入仓' }, { text: '已入仓', value: '已入仓' }]"
      :filter-method="filterTag">
      <template v-slot="scope">
        <el-tag
          :type="scope.row.status === '已入仓' ? 'primary' : 'success'"
          disable-transitions>
          {{ scope.row.status}}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="options"
      label="操作" width="150px">
      <template v-slot="scope">
        <el-button
          size="mini"
          @click="inWare(scope.$index, scope.row)"
          v-if="scope.row.status==='未入仓'">
          入仓
        </el-button>
        <el-button
          size="mini"
          @click="deleteGoods(scope.$index, scope.row)"
          v-if="scope.row.status==='未入仓'">
          删除
        </el-button>
        <el-button
          size="mini"
          type="danger"
          @click="outWare(scope.$index, scope.row)"
          v-if="scope.row.status==='已入仓'">
          出仓</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination" style="margin-top:20px;text-align:center;">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total,prev, sizes, pager, next,jumper"
      :current-page.sync="pageParams.pageNum"
      :page-size="pageParams.pageSize"
      :page-sizes="[10,20,50,100]"
      :total="goodsData.length">
    </el-pagination>
  </div>
  <el-button size="small" style="margin-top: 10px"
             type="primary"
             @click = "outWareMany" :disabled="this.selectItems.length===0">
    批量退仓
  </el-button>
  <el-button size="small" style="margin-top: 10px"
             type="danger"
             @click = "deleteMany"
             :disabled="this.selectItems.length===0">
    批量删除
  </el-button>
  <el-dialog title="录入商品" :visible.sync="formVisible">
    <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
    <el-form :rules="rules" ref="goodsForm" :model="goodsForm" label-width="80px" style="width: 500px">
      <el-form-item label="商品名称" prop="name">
        <el-input type="text" v-model="goodsForm.name" placeholder="请输入商品名称"></el-input>
      </el-form-item>
      <el-form-item label="商品种类" prop="kind">
        <el-select v-model="goodsForm.kind" placeholder="请选择商品种类">
          <el-option label="家具电器" value="家具电器"></el-option>
          <el-option label="食品酒饮" value="食品酒饮"></el-option>
          <el-option label="美妆护肤" value="美妆护肤"></el-option>
          <el-option label="医药保健" value="医药保健"></el-option>
          <el-option label="鞋衣包帽" value="鞋衣包帽"></el-option>
          <el-option label="家居百货" value="家居百货"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品价格" prop="price">
        <el-input type="text" v-model="goodsForm.price" placeholder="请输入商品价格"></el-input>
      </el-form-item>
      <el-form-item label="商品图片">
        <div>只能上传.jpg/.png/.jpeg文件，且不超过2MB</div>
        <el-upload
          action=""
          list-type="picture-card"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-change="handleChange"
          :brfore-upload="beforeUpload"
          accept=".jpg,.png,.jpeg"
          :auto-upload="false"
          :file-list="goodsForm.info">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button @click="formVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确认录入</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "goodsShow",
  data(){
      return{
        selectItems:[],
        //user: JSON.parse(window.sessionStorage.getItem("user"))
        goodsData: [],
        formVisible:false,
        goodsForm: {},
        rules:{
          name:[{
            required:true,message:'请输入商品名称',trigger:'blur'
          }],
          kind:[{
            required:true,message:'请选择商品种类',trigger:'blur'
          }],
          price:[{
            required:true,message:'请输入商品单价',trigger:'blur'
          }]
        },
        dialogImageUrl:'',
        dialogVisible: false,
        pageParams: {
          pageNum: 1,
          pageSize: 10
        }
      }
  },
  /*
  mounted(){
   this.initGoodsData;
  },
* */
  methods:
    {
      initGoodsData(){
        this.getRequest('/获取供货商下所有未入仓和已入仓的商品',user.id).then(res=>{
          if(res)
          {
            //this.warehouse = res
          }
        })
      },
      filterTag(value, row) {
        return row.status === value;
      },
      goodsRegis(){
        this.goodsForm = {};
        this.goodsForm.status='未入仓';
        this.goodsForm.info = [];
        this.goodsForm.storage = 0;
        this.formVisible = true;
      },
      deleteGoods(index,row){
        this.$confirm('此操作将永久删除商品, 是否执行?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //发送删除商品请求,传递用户id，商品id
          let data = {
            userid:'user.id',
            wareid:'warehouse.id'}
          /*this.putRequest('/商品删除请求',data).then(res=>{
          if(res)
          { this.initGoods();重新获取商品}
        })
          * */
          this.goodsData.splice(index,1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消注销'
          });
        });
      },
      inWare(index,row)
      {
        this.$prompt('请输入入仓数量', '请求入仓', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\d/,
          inputErrorMessage: '请输入数字'
        }).then(({ value }) => {
          //发送入仓请求,传递用户id，商品id
          let data = {
            userid:'user.id',
            goodsid:'goods.id'}
          /*this.putRequest('/商品入仓请求',data).then(res=>{
          if(res)
          {
              row.status = '已入仓';
              this.$message({
              type: 'success',
              message: '入仓成功!'
          }
        })
          * */
          row.status = '已入仓';
          row.storage = row.storage + parseInt(value);
          this.$message({
            type: 'success',
            message: '入仓成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消入仓'
          });
        });
      },
      outWare(index, row)
      {
        this.$confirm(row.name+'确认出仓?', '确认出仓', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          //发送出仓请求,传递用户id，商品id
          let data = {
            userid:'',
            goodsid:'goods.id'
          }
          /*this.putRequest('/仓库商品下架请求',data).then(res=>{
          if(res)
          {
              row.status = '未上架';
              this.$message({
              type: 'success',
              message: '下架成功!'
          }
        })
          * */
          row.status = '未入仓'
          row.storage = 0;
          this.$message({
            type: 'success',
            message: '出仓成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消出仓'
          });
        });
      },
      handlerSelectionChange(val) {
        this.selectItems = val;
      },
      outWareMany(){
        this.$confirm('确认批量退仓?', '批量退仓', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          //发送批量上架请求,传递用户id，仓库id，商品批量id
          let ids='?';
          this.selectItems.forEach(item=>{
            ids+='ids='+item.number+'&';
          })
          let data = {
            userid:'user.id',
            wareid:'warehouse.id',
          }
          /*this.putRequest('/仓库商品上架请求',data,ids).then(res=>{
          if(res)
          {
              row.status = '已上架';
              this.$message({
              type: 'success',
              message: '上架成功!'
          }
        })
          * */
          let flag=false;
          this.selectItems.forEach(item=>{
            if(item.status=='未入仓')
            {
              flag=true;
            }
          })
          if(flag)
          {
            this.$message.error("不可重复退仓，请进行筛选")
          }
          else
          {
            this.selectItems.forEach(item=>{
              item.status = '未入仓';
              item.storage = 0;
            })
            this.$message({
              type: 'success',
              message: '批量退仓成功!'
            });
          }
          //每次选择后清空
          this.$refs.goodsTable.clearSelection();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消批量上架'
          });
        });
      },
      deleteMany(){
        this.$confirm('确认批量删除?', '批量删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          //发送批量删除请求,传递用户id，仓库id，商品批量id
          let ids='?';
          this.selectItems.forEach(item=>{
            ids+='ids='+item.number+'&';
          })
          let data = {
            userid:'user.id',
            wareid:'warehouse.id',
          }
          /*this.putRequest('/仓库商品上架请求',data,ids).then(res=>{
          if(res)
          {
              row.status = '已上架';
              this.$message({
              type: 'success',
              message: '上架成功!'
          }
        })
          * */
          let flag=false;
          this.selectItems.forEach(item=>{
            if(item.status=='已入仓')
            {
              flag=true;
            }
          })
          if(flag)
          {
            this.$message.error("已入仓商品不可删除，请进行筛选")
          }
          else
          {
            this.selectItems.forEach(item=>{
              this.goodsData.delete(item.number);
            })
            this.$message({
              type: 'success',
              message: '批量删除成功!'
            });
          }
          //每次选择后清空
          this.$refs.goodsTable.clearSelection();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消批量删除'
          });
        });
      },
      handleRemove(file,fileList) {
        this.goodsForm.info = fileList;
      },
      handlePreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleChange(file,fileList){
        this.goodsForm.info = fileList;
      },
      beforeUpload(file){
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
      onSubmit() {
        this.$refs.goodsForm.validate((valid) => {
          if (valid) {
            let formData = new FormData();
            console.log(this.goodsForm.info);
            this.goodsForm.info.forEach((item,index) => {
                // console.log(item)
                formData.append(index,item.url);
              });
              let data = 'name='+this.goodsForm.name+'&kind='+this.goodsForm.kind+'&price='+
                this.goodsForm.price+"info="+this.goodsForm.info;
              console.log(data);
              /*this.postRequest('/申请录入商品',data).then((res)=>{
                 if(res){}
              })*/
              /*var name = this.goodsForm.name;
              var price = this.goodsForm.price;
              var kind = this.goodsForm.kind;
              var info = this.goodsForm.info;
              var storage = 0;
              var status = '未入仓';*/
              this.goodsData.splice(0,0,this.goodsForm);
              this.formVisible = false;
              this.$message({
                message: '录入成功',
                type: 'success'
              })
          } else {
            return false;
          }
        });
      },
      handleSizeChange(val) {
        this.pageParams.pageNum = 1;
        this.pageParams.pageSize = val;
      },

      handleCurrentChange(val) {
        this.pageParams.pageNum = val;
      }
    }

}
</script>

<style scoped>

</style>
